<template>
    <div class="edit-left-wrap">
        <el-tabs
            v-model="activeIndex"
            tab-position="left"
            class="tabs-wrap"
            @tab-click="onTabClick"
        >
            <el-tab-pane label="组件" name="widget">
                <template #label>
                    <el-icon><icon-coin /></el-icon>
                    <span>组件</span>
                </template>
                <div class="tab-pan">
                    <edit-left-widget />
                </div>
            </el-tab-pane>

            <el-tab-pane label="元素" name="element">
                <template #label>
                    <el-icon><icon-grid /></el-icon>
                    <span>元素</span>
                </template>
                <div class="tab-pan">
                    <edit-left-element />
                </div>
            </el-tab-pane>

            <template v-if="isHasFeature('native_publish')">
                <el-tab-pane label="事件" name="event">
                    <template #label>
                        <el-icon><icon-code /></el-icon>
                        <span>事件</span>
                    </template>
                    <div class="tab-pan">
                        <edit-left-event />
                    </div>
                </el-tab-pane>
            </template>

            <el-tab-pane label="页面" name="page">
                <template #label>
                    <el-icon><icon-reading /></el-icon>
                    <span>页面</span>
                </template>
                <div class="tab-pan">
                    <edit-left-page />
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ElNotification } from 'element-plus'
import useFeature from '@/libs/feature'
import EditLeftWidget from './components/edit-left-widget'
import EditLeftElement from './components/edit-left-element'
import EditLeftEvent from './components/edit-left-event'
import EditLeftPage from './components/edit-left-page'
import { onSetTabActiveEvent } from './events'
export default defineComponent({
    name: 'EditLeft',
    components: {
        EditLeftWidget,
        EditLeftElement,
        EditLeftEvent,
        EditLeftPage
    },
    setup() {
        const {
            isHasFeature
        } = useFeature()

        const activeIndex = ref('widget')

        let notification = null
        onSetTabActiveEvent(name => {
            const actives = {
                widget: 'hi，在左侧选择组件',
                element: 'hi，在左侧管理元素',
                event: 'hi，在左侧管理事件',
                page: 'hi，在左侧管理页面'
            }
            if (!actives[name]) return
            activeIndex.value = name
            notification?.close()
            notification = ElNotification({
                message: actives[name],
                position: 'top-left',
                customClass: 'edit-left-notification'
            })
        })

        const onTabClick = () => {
            notification?.close()
        }

        return {
            isHasFeature,
            activeIndex,
            onTabClick
        }
    }
})
</script>

<style lang="less">
.edit-left-notification {
    width: 220px;
    top: 46% !important;
    left: 340px !important;
    border-color: var(--edit-border-color);
    animation: new-function-tips 1.5s infinite;
    transition: all .5s;
    .el-notification__title {
        position: absolute;
        top: 50%;
        left: 8px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        margin-top: -4px;
        transform: rotate(270deg);
        &:first-child {
            border-bottom: 8px solid var(--edit-color-primary);
        }
        &:last-child {
            top: 11px;
            border-top: 4px solid var(--edit-color-primary);
        }
    }
}
@keyframes new-function-tips {
    50% {
        margin-left: 10px;
    }
    100% {
        margin-left: 0;
    }
}
</style>

<style lang="less" scoped>
.edit-left-wrap {
    position: relative;
    height: 100%;
    overflow-y: hidden;
    & > .tabs-wrap {
        height: 100%;
        & > ::v-deep(.el-tabs__header) {
            margin-right: 0;
            .el-tabs__nav-wrap {
                width: 60px;
                background-color: #545c64;
                margin-right: 0;
                &::after {
                    display: none;
                }
                .el-tabs__item {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    height: auto;
                    line-height: initial;
                    text-align: center;
                    white-space: normal;
                    padding: 15px !important;
                    box-sizing: border-box;
                    & > .el-icon {
                        font-size: 18px;
                        color: hsla(0, 0%, 100%, .7);
                    }
                    & > span {
                        display: block;
                        line-height: 1;
                        color: hsla(0, 0%, 100%, .7);
                        margin-top: 4px;
                    }
                    &.is-active {
                        & > .el-icon, & > span {
                            color: var(--edit-color-primary);
                        }
                    }
                }
                .el-tabs__active-bar {
                    left: 0;
                    right: 0;
                    width: auto;
                    background-color: #434a50;
                    z-index: -1;
                }
            }
        }
        & > ::v-deep(.el-tabs__content) {
            height: 100%;
            .el-tab-pane {
                height: 100%;
            }
        }
    }
    .tab-pan {
        width: 266px;
        height: 100%;
        background-color: var(--edit-bg-color);
    }
}
</style>